<template>
    <div id="chart-network"></div>
</template>

<script>
import 'morris.js/morris'
import 'morris.js/morris.css'
import Raphael from 'raphael/raphael'
global.Raphael = Raphael

export default {
  name: 'chart-network',
  data () {
    return {
      networkData: [
        {'elapsed': 'Oct-12', 'value': 24, b: 2},
        {'elapsed': 'Oct-13', 'value': 34, b: 22},
        {'elapsed': 'Oct-14', 'value': 33, b: 7},
        {'elapsed': 'Oct-15', 'value': 22, b: 6},
        {'elapsed': 'Oct-16', 'value': 28, b: 17},
        {'elapsed': 'Oct-17', 'value': 60, b: 15},
        {'elapsed': 'Oct-18', 'value': 60, b: 17},
        {'elapsed': 'Oct-19', 'value': 70, b: 7},
        {'elapsed': 'Oct-20', 'value': 67, b: 18},
        {'elapsed': 'Oct-21', 'value': 86, b: 18},
        {'elapsed': 'Oct-22', 'value': 86, b: 18},
        {'elapsed': 'Oct-23', 'value': 113, b: 29},
        {'elapsed': 'Oct-24', 'value': 130, b: 23},
        {'elapsed': 'Oct-25', 'value': 114, b: 10},
        {'elapsed': 'Oct-26', 'value': 80, b: 22},
        {'elapsed': 'Oct-27', 'value': 109, b: 7},
        {'elapsed': 'Oct-28', 'value': 100, b: 6},
        {'elapsed': 'Oct-29', 'value': 105, b: 17},
        {'elapsed': 'Oct-30', 'value': 110, b: 15},
        {'elapsed': 'Oct-31', 'value': 102, b: 17},
        {'elapsed': 'Nov-01', 'value': 107, b: 7},
        {'elapsed': 'Nov-02', 'value': 60, b: 18},
        {'elapsed': 'Nov-03', 'value': 67, b: 18},
        {'elapsed': 'Nov-04', 'value': 76, b: 18},
        {'elapsed': 'Nov-05', 'value': 73, b: 29},
        {'elapsed': 'Nov-06', 'value': 94, b: 13},
        {'elapsed': 'Nov-07', 'value': 135, b: 2},
        {'elapsed': 'Nov-08', 'value': 154, b: 22},
        {'elapsed': 'Nov-09', 'value': 120, b: 7},
        {'elapsed': 'Nov-10', 'value': 100, b: 6},
        {'elapsed': 'Nov-11', 'value': 130, b: 17},
        {'elapsed': 'Nov-12', 'value': 100, b: 15},
        {'elapsed': 'Nov-13', 'value': 60, b: 17},
        {'elapsed': 'Nov-14', 'value': 70, b: 7},
        {'elapsed': 'Nov-15', 'value': 67, b: 18},
        {'elapsed': 'Nov-16', 'value': 86, b: 18},
        {'elapsed': 'Nov-17', 'value': 86, b: 18},
        {'elapsed': 'Nov-18', 'value': 113, b: 29},
        {'elapsed': 'Nov-19', 'value': 130, b: 23},
        {'elapsed': 'Nov-20', 'value': 114, b: 10},
        {'elapsed': 'Nov-21', 'value': 80, b: 22},
        {'elapsed': 'Nov-22', 'value': 109, b: 7},
        {'elapsed': 'Nov-23', 'value': 100, b: 6},
        {'elapsed': 'Nov-24', 'value': 105, b: 17},
        {'elapsed': 'Nov-25', 'value': 110, b: 15},
        {'elapsed': 'Nov-26', 'value': 102, b: 17},
        {'elapsed': 'Nov-27', 'value': 107, b: 7},
        {'elapsed': 'Nov-28', 'value': 60, b: 18},
        {'elapsed': 'Nov-29', 'value': 67, b: 18},
        {'elapsed': 'Nov-30', 'value': 76, b: 18},
        {'elapsed': 'Des-01', 'value': 73, b: 29},
        {'elapsed': 'Des-02', 'value': 94, b: 13},
        {'elapsed': 'Des-03', 'value': 79, b: 24}
      ]
    }
  },
  mounted () {
    let options = {
      element: 'chart-network',
      data: this.networkData,
      axes: false,
      xkey: 'elapsed',
      ykeys: ['value', 'b'],
      labels: ['下载速度', '上传速度'],
      yLabelFormat: function (y) { return y.toString() + ' Mb/s' },
      gridEnabled: false,
      gridLineColor: 'transparent',
      lineColors: ['#82c4f8', '#0d92fc'],
      lineWidth: [0, 0],
      pointSize: [0, 0],
      fillOpacity: 1,
      gridTextColor: '#999',
      parseTime: false,
      resize: true,
      behaveLikeLine: true,
      hideHover: 'auto'
    }

    // eslint-disable-next-line
    const chart = Morris.Area(options)
  }
}
</script>

<style scoped>
#chart-network{
  height: 200px;
}
</style>
